<template>
  <view class="pay">
    <button
      open-type="getUserInfo"
      @getuserinfo="getuserinfo"
      class="pay_btn"
    >获取用户信息</button>
    <!-- 收货地址 -->
    <view class="address_info">
      <view class="address_name_wrap">
        <view>{{address.userName}}</view>
        <view>{{address.detail}}</view>
      </view>
      <view class="address_phone">{{address.telNumber}}</view>
    </view>
    <!-- 商品列表 -->
    <view class="cart_main">
      <view class="cart_title">支付</view>
      <view class="cart_content">
        <view
          class="cart_item"
          v-for="(item,index) in cartList"
          :key="index"
        >
          <!-- !!!!! -->
          <van-card
            :price="item.goods_price"
            :title="item.goods_name"
            :num="item.count"
            :thumb="item.goods_small_logo"
            custom-class="custom-class"
          >
          </van-card>
          <!-- xxxxx -->
        </view>
      </view>
    </view>
    <!-- 提交订单 -->
    <van-submit-bar
      :price="countInfo.allPrice"
      :button-text="`支付(${countInfo.cateNums})`"
      :tip="true"
      custom-class="custom_class_btm"
    >

    </van-submit-bar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 存放收货地址
      address: null,
      cartList: [],
    };
  },

  computed: {
    countInfo() {
      // 2 总价格
      let allPrice = 0;
      this.cartList.forEach((goods) => {
        // 已经勾选了的商品
        if (goods.checked) {
          allPrice += goods.count * goods.goods_price;
        }
      });
      return {
        // 是否全选
        // 总价格
        // 准备要结算的商品的种类 cateNums
        allPrice: allPrice * 100,
        cateNums: this.cartList.filter((goods) => goods.checked).length,
      };
    },
  },

  onLoad() {
    this.address = getApp().globalData.address;
    // 缓存里面的购物车有选中的 也有未选中的
    this.cartList = uni.getStorageSync("cartList").filter((v) => v.checked);
  },
  methods: {
    // 点击获取用户信息按钮
    async getuserinfo(event) {
      const { encryptedData, rawData, iv, signature } = event.detail;
      const res = await uni.login();
      const { code } = res[1];

      const params = { encryptedData, rawData, iv, signature, code };
      // console.log(params);

      // 准备获取 token
      // get 里面可以使用post请求
      // 如果 管理员没有把你添加到 这个appid对应的项目的开发者名单中 那么获取token 一定会失败!!!
      const res2 = await this.get({
        url: "/users/wxlogin",
        method: "post",
        data: params,
      });

      const { token } = res2; // null

      // 创建订单
      // 构造一下订单要求的参数
      const orderParams = {
        // 订单总价格
        order_price: this.countInfo.allPrice,
        // 收货地址
        consignee_addr: this.address.detail,
        // 订单数组
        goods: this.cartList.map((goods) => ({
          // 商品的id
          goods_id: goods.goods_id,
          // 购买的数量
          goods_number: goods.count,
          // 单价
          goods_price: goods.goods_price,
        })),
      };

      // 发送请求 提交订单  获取到了订单编号
      const { order_number } = await this.get({
        url: "/my/orders/create",
        data: orderParams,
        method: "post",
        header: { Authorization: token },
      });

      // 获取支付参数 pay (为了调起微信支付使用!!! )
      const { pay } = await this.get({
        url: "/my/orders/req_unifiedorder",
        data: { order_number },
        method: "post",
        header: { Authorization: token },
      });

      // 调起微信支付
      const res3 = await uni.requestPayment({ ...pay });
      // console.log(res3);
      if (res3[0] === null) {
        // 微信支付成功  扣钱成功

        // 查询后台 当前的订单状态如何
        const res4 = await this.get({
          url: "/my/orders/chkOrder",
          data: { order_number },
          method: "post",
          header: { Authorization: token },
        });

        uni.showToast({ title: "支付成功" });
        setTimeout(() => {
          // 跳转到订单查询页面
          uni.navigateTo({ url: "/pages/order/order" });
        }, 1500);
      } else {
        console.error(res3);
      }
    },
  },
};
</script>

<style lang="less" >
.address_info {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: 1rpx solid #eb4450;
}

.cart_main {
  .cart_title {
    padding: 20rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #eb4450;
    border-top: 1rpx solid #eb4450;
    border-bottom: 1rpx solid #eb4450;
  }
  .cart_content {
    .cart_item {
      border-bottom: 2rpx solid #ccc;
      .custom-class {
        background-color: #fff !important;
      }
    }
  }
}

.custom_class_btm {
  border-top: 2rpx solid #ccc !important;
}
.pay_btn {
  position: fixed;
  right: 15px;
  bottom: 4px;
  background-color: black;
  z-index: 1000;
  opacity: 0;
  width: 112px;
  height: 41px;
  border-radius: 20px;
}
</style>